<template>
  <div class="goods">
    <div class="nav">
      <div class="w">
        <a @click="handleSort(i)" :class="{active:isIndex==i}" href="javascript:;" v-for="(navItem,i) in navList" :key="i">{{ navItem.title }}</a>
        <div class="price-interval">
          <input type="number" class="input" placeholder="价格" v-model="min">
          <span style="margin: 0 5px">-</span>
          <input type="number" placeholder="价格" v-model="max">
          <el-button @click="reset" type="primary" size="small" style="margin-left: 10px;">确定</el-button>
        </div>
      </div>
    </div>
    <div class="goods-box w" v-if="!isEmpty">
      <MallGoods v-for="goods in allGoods" :key="goods.id" :goods="goods"></MallGoods>
    </div>
    <div class="empty w" v-else>
      暂无商品
    </div>
    <div class="w">
      <el-pagination
      style="float: right;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[8, 20, 40, 80]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import MallGoods from '../../components/MallGoods'
export default {
  name: 'Goods',
  data() {
    return {
      // 输入价格的区间
      min: '',
      max: '',
      navList: [
        {title: '综合排序'},
        {title: '价格由低到高'},
        {title: '价格由高到低'},
      ],
      isIndex: 0,
      // 当前的页数
      currentPage: 1,
      // 每页展示商品的数量
      pageSize: 8,
      // 价格的排序
      sort: '',
      // 商品的总数量
      total: 0,
      allGoods: [],
      // 查询商品是否为空
      isEmpty: false
    }
  },
  components: {
    MallGoods
  },
  created() {
    this.getAllGoods()
  },
  // 因为全部和品牌周边路由组件可以复用，所以在这儿监听一下路由的改变，如果是品牌周边的话，路由query里会携带cid
  watch: {
    $route: "getAllGoods"
  },
  methods: {
    // 获取所有商品的数据
    async getAllGoods() {
      this.isEmpty = false
      const url = this.$route.query.cid ? `/api/goods/allGoods?page=${this.currentPage}&size=${this.pageSize}&sort=${this.sort}&priceGt=${this.min}&priceLte=${this.max}&cid=${this.$route.query.cid}` : `/api/goods/allGoods?page=${this.currentPage}&size=${this.pageSize}&sort=${this.sort}&priceGt=${this.min}&priceLte=${this.max}`
      const res = await this.$http.get(url)
      this.allGoods = res.data.data
      this.total = res.data.total
      if (this.allGoods.length == 0) {
        this.isEmpty = true
      }
    },
    // 点击a标签处理价格排序函数，同时切换a标签当前的高亮状态
    handleSort(i) {
      this.isIndex = i
      switch(i) {
        case 0:
          // 综合排序
          this.currentPage = 1
          this.sort = ''
          this.getAllGoods()
          break;
        case 1:
          // 正序
          this.sort = 1
          this.getAllGoods()
          break;
        case 2:
          // 倒序
          this.sort = -1
          this.getAllGoods()
          break;
      }
    },
    // 输入价格区间，点击确定后处理函数
    reset() {
      this.getAllGoods()
    },
    // 选择每页展示几条数据时触发
    handleSizeChange(val) {
      this.isEmpty = false
      this.pageSize = val
      this.getAllGoods()
    },
    // 切换当前页时触发
    handleCurrentChange(val) {
      this.isEmpty = false
      this.currentPage = val
      this.getAllGoods()
    }
  },
}
</script>

<style lang="scss" scoped>
@import "../../assets/style/mixin";
@import "../../assets/style/theme";

.w {
  overflow: hidden;
}
.nav {
  height: 60px;
  line-height: 60px;
  > div {
    display: flex;
    align-items: center;
    a {
      padding: 0 30px 0 0;
      height: 100%;
      @extend %block-center;
      font-size: 12px;
      color: #999;
      &.active {
        color: #5683ea;
      }
      &:hover {
        color: #5683ea;
      }
    }
    input {
      @include wh(80px, 30px);
      border: 1px solid #ccc;
    }
    input + input {
      margin-left: 10px;
    }
  }
  .price-interval {
    padding: 0 15px;
    @extend %block-center;
    input[type="number"] {
      border: 1px solid #ccc;
      text-align: center;
      background: none;
      border-radius: 5px;
    }
  }
}

.goods-box {
  overflow: hidden;
  > div {
    float: left;
    border: 1px solid #efefef;
  }
}

.no-info {
  padding: 100px 0;
  text-align: center;
  font-size: 30px;
  display: flex;
  flex-direction: column;
  .no-data {
    align-self: center;
  }
}

.img-item {
  display: flex;
  flex-direction: column;
}

.el-pagination {
  align-self: flex-end;
  margin: 3vw 10vw 2vw;
}

.section {
  padding-top: 8vw;
  margin-bottom: -5vw;
  width: 1218px;
  align-self: center;
}

.recommend {
  display: flex;
  > div {
    flex: 1;
    width: 25%;
  }
}
.empty {
  margin: 100px auto;
  font-size: 20px;
  text-align: center;
}
</style>